<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书详情</title>
    <link rel="stylesheet" type="text/css" href="/site/css/styles.css">
</head>
<body>
<div id="app">
    <app-header></app-header>
    <app-sidebar></app-sidebar>

    <div class="main-content">
        <h2>{{ book.id ? '编辑图书' : '添加图书' }}</h2>
        <form @submit.prevent="submitForm">
            <input type="hidden" v-model="book.id">

            <div class="form-group">
                <label for="title">书名:</label>
                <input type="text" id="title" v-model="book.title" required>
            </div>
            <div class="form-group">
                <label for="author">作者:</label>
                <input type="text" id="author" v-model="book.author" required>
            </div>
            <div class="form-group">
                <label for="isbn">书号ISBN:</label>
                <input type="text" id="isbn" v-model="book.isbn" required>
            </div>
            <div class="form-group">
                <label for="publisher">出版社:</label>
                <input type="text" id="publisher" v-model="book.publisher" required>
            </div>
            <div class="form-group">
                <label for="publicationYear">出版年份:</label>
                <input type="number" id="publicationYear" v-model="book.publicationYear" required>
            </div>
            <div class="form-group">
                <label for="language">语言:</label>
                <select id="language" v-model="book.language" required>
                    <option value="中文" selected>中文</option>
                    <option value="英文">英文</option>
                    <option value="法文">法文</option>
                    <option value="日文">日文</option>
                    <option value="德文">德文</option>
                </select>
            </div>
            <div class="form-group">
                <label for="genre">类别:</label>
                <select id="genre" v-model="book.genre" required>
                    <option value="政治讽刺">政治讽刺</option>
                    <option value="文学" selected>文学</option>
                    <option value="奇幻">奇幻</option>
                    <option value="悬疑">悬疑</option>
                    <option value="科幻">科幻</option>
                    <option value="科学技术">科学技术</option>
                </select>
            </div>
            <div class="form-group">
                <label for="location">馆藏位置:</label>
                <select id="location" v-model="book.location" required>
                    <option value="理科1室" selected>理科1室</option>
                    <option value="理科2室">理科2室</option>
                    <option value="文科1室">文科1室</option>
                    <option value="文科2室">文科2室</option>
                    <option value="珍藏室">珍藏室</option>
                </select>
            </div>
            <div class="form-group">
                <label for="status">图书状态:</label>
                <select id="status" v-model="book.status" required>
                    <option value="1" selected>在馆</option>
                    <option value="2">外借</option>
                    <option value="3">未上架</option>
                </select>
            </div>
            <div class="form-group full-width">
                <label for="description">图书简介:</label>
                <textarea id="description" v-model="book.description"></textarea>
            </div>
            <div class="form-group submit">
                <input type="submit" :value="book.id ? '更新图书' : '添加图书'">
            </div>
        </form>
        <p></p> @edu XXX大学计算机学院 班级:xxx, 学号:xx, 姓名:xxx <p></p>
    </div>
</div>
<!-- 引入 Vue -->
<script src="/assets/vue/vue3.min.js"></script>
<!-- 引入 Axios -->
<script src="/assets/axios/axios.min.js"></script>
<!-- 引入组件 -->
<script src="/site/js/component/header.js"></script>
<script src="/site/js/component/sidebar.js"></script>
<script>
    const {reactive, onMounted} = Vue;

    const app = {
        // 使用局部注册的方式注册组件
        components: {
            AppHeader,
            AppSidebar
        },

        setup() {
            // 定义响应式数据
            const book = reactive({
                language: '中文',
                genre: '文学',
                location: '理科1室',
                status: '在馆',
            });

            // 获取图书详情的方法
            const fetchBookById = (id) => {
                axios.get(`/api/book/${id}`)
                    .then(response => {
                        if (response.data.code === 200) {
                            Object.assign(book, response.data.data); // 将返回的数据合并到 book 中
                        }
                    })
                    .catch(error => {
                        console.error('获取图书详情失败:', error);
                        alert('获取图书详情失败，请稍后再试');
                    });
            }

            // 提交表单的方法
            const submitForm = () => {
                if (book.id) {
                    // 更新图书
                    axios.put('/api/book/', book)
                        .then(response => {
                            if (response.data.code === 200) {
                                alert('更新图书成功');
                                window.location.href = `/book/list`;
                            } else {
                                alert('更新图书失败: ' + response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('更新图书失败:', error);
                        });
                } else {
                    // 添加图书
                    axios.post('/api/book/', book)
                        .then(response => {
                            if (response.data.code === 200) {
                                alert('添加图书成功');
                                window.location.href = `/book/list`;
                            } else {
                                alert('添加图书失败: ' + response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('添加图书失败:', error);
                        });
                }
            }

            // 获取 URL 中的 ID 并加载图书详情
            onMounted(() => {
                const id = new URLSearchParams(window.location.search).get('id');
                if (id) {
                    fetchBookById(id);
                }
            });

            // 返回模板中需要的数据和方法
            return {book, submitForm};
        }
    };

    Vue.createApp(app).mount('#app');
</script>
</body>
</html>